<template>
	<div class="promotion navBar">
		<van-nav-bar :title="$route.meta.title" left-arrow @click-left="$routerBack" />
		<div class="promotion_top">
			<p>364.00</p>
			<p>总收益</p>
		</div>

		<div class="promotion_content">

			<div class="pc_top">
				<div class="pct_title">
					<div class="pt_left"></div>
					<span>兑换</span>
				</div>

				<div class="pct_content">
					<div>
						<div class="cw_btb">
							<div :class="index+1 == post_data.type ? 'on' : ''" @click="post_data.type = index+1" v-for="item,index in 2"
							 :key="index">{{index == 0 ? '宠物' : 'BTB'}}</div>
						</div>

						<span class="num">10000只</span>
					</div>
					
					<div v-if="post_data.type == 2">
						<div>
							兑换数量
						</div>
					
						<div class="ipt">
							<input v-model="post_data.num" placeholder="请输入兑换数额" type="number">
							<img src="../../assets/user/go.png" alt="">
						</div>
					</div>
					
					<!-- 宠物兑换 -->
					<div v-if="post_data.type == 1">
						<div>
							兑换数量
						</div>

						<div class="ipt">
							<input v-model="post_data.count" placeholder="请输入兑换数量" type="number">
							<img src="../../assets/user/go.png" alt="">
						</div>
					</div>
					<div v-if="post_data.type == 1">
						<div>
							单价
						</div>

						<div class="ipt">
							<input v-model="post_data.num" placeholder="宠物单价" type="number">
							<img src="../../assets/user/go.png" alt="">
						</div>
					</div>
					<div v-if="post_data.type == 1" @click=" showPicker = true">
						<div>
							宠物
						</div>

						<div class="ipt">
							<p>{{pets_name}}</p>
							<img src="../../assets/user/go.png" alt="">
						</div>
					</div>
				</div>
			</div>

			<div class="pc_bottom">
				<button @click="confirm">确认兑换</button>
				<p>*每个用户每天只能兑换一次</p>
				<p>兑换的宠物直接转直待转让</p>
				<p>最低资产3000，推广收益达到1000才可兑换</p>
			</div>
		</div>

		<InputPassword ref="InputPassword"></InputPassword>

		<van-popup v-model="showPicker" position="bottom">
			<van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
		</van-popup>

	</div>
</template>

<script>
	import Vue from 'vue';
	import {
		Picker
	} from 'vant';

	Vue.use(Picker);

	import InputPassword from '../../components/InputPassword.vue'
	export default {
		name: "promotion",
		components: {
			InputPassword
		},
		async created() {

			try {

				const data = await this.$apis.Pets.index()

				this.pets_list = data.data

				let resultArr = [];
				let count = 0
				for (let index in data.data) {

					this.columns[count] = data.data[index].name
					count++
				}

			} catch (e) {
				//TODO handle the exception
			}

		},
		data() {
			return {

				// 选择弹出
				showPicker: false,

				// 宠物列表
				columns: [],

				// 宠物列表
				pets_list: "",

				// 选中的宠物id
				pets_id: "",

				// 选中的宠物名字
				pets_name: "请选择宠物类别",

				post_data: {
					// 1宠物    2BTB
					type: 1,
					// 数量
					count: "",
					// 宠物单价
					num: "",
					// 宠物id
					order: "",
					//交易密码
					pass: ""
				}
			}
		},
		methods: {
			// 宠物类别选择
			onConfirm(value) {

				for (let item in this.pets_list) {

					if (this.pets_list[item].name == value) {

						this.post_data.order = this.pets_list[item].dw_id

					}

				}

				this.pets_name = value
				this.showPicker = false
			},

			// 点击确认兑换
			confirm() {

				if (this.post_data.type == 1) {

					if (this.post_data.count <= 0) return this.$toast("请填写正确的数量");

					if (this.post_data.num <= 0) return this.$toast("请填写正确的宠物单价");

					if (this.post_data.order == "") return this.$toast("请选择宠物类别");
					
				} else {

					if (this.post_data.num <= 0) return this.$toast("请填写正确的数量");
				}

				this.$refs.InputPassword.open({
					methods: async () => {

						this.post_data.pass = this.$refs.InputPassword.passowrd

						try {

							const data = await this.$apis.User.exchange(this.post_data)

							this.$toast(data.msg)
							
							// 兑换完清空数据
							this.post_data.count = ""
							this.post_data.num = ""
							this.post_data.order = ""
							this.post_data.pass = ""
							this.pets_name = "请选择宠物类别"
							
							setTimeout( () => {
								
								this.$refs.InputPassword.confirmShow = false
								this.$refs.InputPassword.showKeyboard = false
								this.$refs.InputPassword.passowrd = ""
								
							},500)

						} catch (e) {
							
							if(e.pwd){
								setTimeout( () => {
									this.$refs.InputPassword.passowrd = ""
								},1500)
							}
							
							this.$toast(e.msg)
							
							//TODO handle the exception
						}

					}
				})

			}
		}
	}
</script>

<style lang="less" scoped>
	@import '../../style/navBar.less';

	.promotion {

		.promotion_content {

			.pc_top {
				border-bottom: 1px solid #1A304F;
				padding: .45rem .55rem 0 .4rem;
				box-sizing: border-box;

				.pct_title {
					display: flex;
					align-items: center;
					font-size: .3rem;
					color: #8FE2F8;

					.pt_left {
						margin-right: .12rem;
						width: .04rem;
						height: .26rem;
						background: linear-gradient(0deg, rgba(28, 206, 244, 1), rgba(0, 254, 202, 1));
					}
				}

				.pct_content {
					padding: .3rem 0 0 .12rem;
					box-sizing: border-box;
					color: #8FE2F8;
					font-size: .28rem;

					.cw_btb {
						color: #8FE2F8;
						display: flex;
						background-color: rgb(51, 72, 99);
						width: 1.6rem;
						height: .4rem;
						border-radius: .1rem;

						div {
							width: 100%;
							text-align: center;
							line-height: .4rem;
							border-radius: .1rem;
						}

						.on {
							color: #333333;
							background: linear-gradient(0deg, rgba(28, 206, 244, 1), rgba(0, 254, 202, 1));
						}
					}

					>div {
						margin-bottom: .4rem;
						display: flex;
						justify-content: space-between;

						.num {
							color: #00FECA;
							margin-right: .5rem;
						}
					}

					.ipt {
						display: flex;
						align-items: center;

						input {
							border: none;
							outline: none;
							background-color: transparent;
							text-align: right;
						}

						input::placeholder {
							color: #3A627E;
						}

						img {
							width: .1rem;
							height: .22rem;
							margin-left: .4rem;
						}
					}
				}
			}
		}

		.pc_bottom {
			padding: .53rem .75rem 0 .75rem;
			box-sizing: border-box;
			color: #8FE2F8;
			font-size: .24rem;

			button {
				outline: none;
				border: none;
				background-color: transparent;
				box-shadow: inset 0px 0px .3rem 0px rgba(28, 176, 212, 1);
				font-size: .28rem;
				color: #94E9FF;
				width: 100%;
				border-radius: .2rem;
				height: .72rem;
				margin-bottom: .34rem;
			}

			p {
				margin-bottom: .1rem;
				padding-left: .15rem;
				box-sizing: border-box;
			}
		}

		.promotion_top {
			background-image: url(../../assets/user/tgsy_bg.png);
			width: 100%;
			height: 3.36rem;
			color: white;
			display: flex;
			align-items: center;
			flex-direction: column;

			>p:nth-child(1) {
				font-size: .56rem;
				margin-top: .82rem;
			}

			>p:nth-child(2) {
				font-size: .28rem;
				margin-top: .1rem;
			}
		}
	}
</style>
